<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>购物车</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
  <link rel="stylesheet" href="../../../static/wxui/lib/weui.min.css" th:href="@{/wxui/lib/weui.min.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/jquery-weui.css" th:href="@{/wxui/css/jquery-weui.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/style.css" th:href="@{/wxui/css/style.css}">
</head>
<body ontouchstart>
<!--主体-->
<header class="wy-header">
  <div class="wy-header-icon-back"><span></span></div>
  <div class="wy-header-title">购物车</div>
</header>
<div class="weui-content">

  <div class="weui-panel weui-panel_access" th:each="shopcar :${carList}">
    <div class="weui-panel__bd">
      <div class="weui-media-box_appmsg pd-10">
        <div class="weui-media-box__hd check-w weui-cells_checkbox">
          <label class="weui-check__label" th:for="${shopcar.id}">
            <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" th:id="${shopcar.id}"><i class="weui-icon-checked"></i></div>
          </label>
        </div>
        <div class="weui-media-box__hd"><a href="pro_info.html"><img class="weui-media-box__thumb" src="upload/pro3.jpg" th:src="${shopcar.goodsImg}" alt=""></a></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc"><a href="pro_info.html" th:text="${shopcar.title}" class="ord-pro-link">春装2017新款女装韩版长袖衬衫女修身显瘦上衣蝴蝶结收腰衬衣</a></h1>
          <p class="weui-media-box__desc" th:text="${shopcar.specificationsInfo}">尺码：L,颜色:白色</p>
          <div class="wy-dele" th:id="${shopcar.id}"></div>
          <div class="clear mg-t-10">
            <div class="wy-pro-pri fl">¥<em class="num font-15" th:text="${shopcar.price}">296.00</em></div>
            <div class="pro-amount fr"><div class="Spinner"></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
  <div class="npd cart-foot-check-item weui-cells_checkbox allselect">
    <label class="weui-cell allsec-well weui-check__label" for="all">
      <div class="weui-cell__hd">
        <input type="checkbox" class="weui-check" name="all-sec" id="all">
        <i class="weui-icon-checked"></i>
      </div>
      <div class="weui-cell__bd">
        <p class="font-14">全选</p>
      </div>
    </label>
  </div>
  <div class="weui-tabbar__item  npd">
    <p class="cart-total-txt">合计：<i>￥</i><em class="num font-16" id="zong1">0</em></p>
  </div>
  <a href="javascript:;" class="red-color npd w-90 t-c">
    <p class="promotion-foot-menu-label" id="goOrder">去结算</p>
  </a>
</div>

<script src="../../../static/wxui/lib/jquery-2.1.4.js" th:src="@{/wxui/lib/jquery-2.1.4.js}"></script>
<script src="../../../static/wxui/lib/fastclick.js" th:src="@{/wxui/lib/fastclick.js}"></script>
<script src="../../../static/wxui/js/jquery.Spinner.js" th:src="@{/wxui/js/jquery.Spinner.js}"></script>
<script>
    //返回上一页
    $(function() {
        FastClick.attach(document.body);
        $(".wy-header-icon-back").click(function(e){
            window.history.back();
            e.stopPropagation();
        });
    });
</script>
<script type="text/javascript" th:inline="javascript">
    //数量
    $(function(){
        $(".Spinner").each(function (i) {
            var num = [[${carList}]][i].num;
            $(this).Spinner({value:num, len:3, max:999});
        });
    });
</script>
<script src="../../../static/wxui/js/jquery-weui.js" th:src="@{/wxui/js/jquery-weui.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        <!---全选按钮-->
        $(".allselect").click(function () {
            if($(this).find("input[name=all-sec]").prop("checked")){
                $("input[name=cartpro]").each(function () {
                    $(this).prop("checked", true);
                });
            }
            else {
                $("input[name=cartpro]").each(function () {
                    if ($(this).prop("checked")) {
                        $(this).prop("checked", false);
                    } else {
                        $(this).prop("checked", true);
                    }
                });
            }
            cacl();
        });
    });

    //点击去结算
    $("#goOrder").click(function () {
        var ids = new Array();//被选中的id数组
        var index = 0;
        $("input[name=cartpro]").each(function () {
            var $this = $(this);//当前的checkbox
            if ($this.prop("checked")) {
                var $div = $this.closest(".weui-panel");//当前选中的最外层div
                var $id = $div.find('.wy-dele').attr("id");
                ids[index] = $id;
                index++;
            }
        });
        $.ajax({
            type: "post",
            url: "/orderInfo/frontStage/addOrderForMoreGoods",
            data:JSON.stringify(ids),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (data) {
                if (data.code == 200) {
                    location.href='/orderInfo/frontStage/goOrderDetilPage?orderInfoId=' + data.data
                } else {
                    $.toast(data.msg, "text");
                }
            }
        });

        console.log(ids);
    })
</script>
<script>
    //删除
    $(document).on("click", ".wy-dele", function() {
        var $delBtn = $(this);
        var $id = $delBtn.attr("id");
        $.confirm("您确定要把此商品从购物车删除吗?", "确认删除?", function() {
            $delBtn.closest(".weui-panel").remove();
            $.ajax({
                type: "post",
                url: "/shopcar/front/delcar",
                data:{
                    id:$id
                },
                dataType: 'json',
                success: function (data) {
                    if(data.code==0){
                        cacl();
                        $.toast("商品已经删除!");
                    }else{
                        $.toast("删除失败!","text");
                    }
                }
            });
        }, function() {
            //取消操作
        });
    });

    //重新勾选商品触发
    $(".check-w").click(function () {
        cacl();
    })

    //更改数量触发
    $(".Spinner").click(function () {
        var $div = $(this).closest(".weui-panel");
        var $id = $div.find('.wy-dele').attr("id");
        var $num = $div.find('.Amount').val();
        setTimeout(function(){
            $.ajax({
                type: "post",
                url: "/shopcar/front/updateNum",
                data:{
                    id:$id,
                    num:$num
                },
                dataType: 'json'
            });
        },1000);
        cacl();
    })

    //价格计算方法
    function cacl() {
        var count = 0.00;//总价
        $("input[name=cartpro]").each(function () {
            var $this = $(this);//当前的checkbox
            if ($this.prop("checked")) {
                var $div = $this.closest(".weui-panel");//当前选中的最外层div
                var price = $div.find("em").html();
                var num = $div.find('.Amount').val();
                count += price*num;
            }
        });
        $("#zong1").html(count);
    }
</script>

</body>
</html>
